<%- include fheader.ejs%>
<style>
    .ul-col li .pic{
        display: table-cell;
        height:80px;
        width:80px;
        position: relative;
    }
    .ul-col li .pic img{
        width: 100%;
    }

    .pic .uploading{
        position: absolute;
        color:#fff;
        right: 0;
        top: 0;
        opacity: 0.5;
        background-color: #000;
        width: 100%;
        height: 100%;
        overflow: hidden;display:none;}

    .uploadpic{position: relative;}
    .uploadpic input[type=file]{
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index:10;
    }
</style>
    <header class="ui-header ui-header-stable ui-border-b">
        <h1><%= title%></h1>
    </header>
    <section  class="ui-container">

        <div class="ui-form ui-border-t">
            <form>
                <div class="ui-form-item ui-form-item-show ui-border-b">
                    <label>
                        产品名称
                    </label>
                    <input type="text" id="prodName" readonly/>
                    <div class="ui-select" style="display: none">
                        <select id="prodList">
                            <%for(var i in prod_list){%>
                            <option value="<%= prod_list[i]['prod_id']%>" <%= (prod_list[i]['prod_id']==prod_id?'selected':'')%>><%=prod_list[i]['prod_name']%></option>
                            <%}%>
                        </select>
                    </div>
                </div>
                <div class="ui-form-item ui-form-item-show ui-border-b">
                    <label>
                        被保人姓名
                    </label>
                    <input type="text" value="<%= name%>" readonly/>
                </div>
                <div class="ui-form-item ui-form-item-show ui-border-b">
                    <label>
                        证件类型
                    </label>
                    <input type="text" readonly value="身份证" />
                    <div class="ui-select" style="display: none">
                        <select id="prodList" readonly>
                            <option value="1">身份证</option>
                        </select>
                    </div>
                </div>
                <div class="ui-form-item ui-form-item-show ui-border-b">
                    <label>
                        证件号码
                    </label>
                    <input type="text" value="<%= cdno%>" readonly>
                </div>
            </form>
        </div>

        <div class="ui-txt-muted" style="padding: 15px 15px 0 15px;line-height:1.4;color:#18b4ed;margin-bottom: 10px">
            请严格按照示例图片拍摄，否则可能无法通过理赔审核，示例图片（点击可看大图）。
        </div>
        <div>
            <ul class="ul-col">
                <li>
                    <div class="pic" id="imgInvoice">
                        <img src="/wx/img/uploadpic4.jpg" width="75">
                        <div class="uploading">上传中</div>
                    </div>
                     <div class="ui-txt-muted">发票/小票</div>
                    <div class="uploadpic">
                        <i class="iconfontbaoxian icon-xiangji"></i>
                        <input type="file" name="file-invoice" data-for="imgInvoice" data-type="comp_invoice">
                        <div class="uploadedpic"><img src="/wx/img/trans.png" width="75"></div>
                    </div>

                </li>
                <li>
                    <div class="pic" id="imgMobile1">
                        <img src="/wx/img/uploadpic1.jpg" width="75">
                        <div class="uploading">上传中</div>
                    </div>
                    <div class="ui-txt-muted">正面</div>
                    <div class="uploadpic">
                        <i class="iconfontbaoxian icon-xiangji"></i>
                        <input type="file" name="file-mobile1" data-for="imgMobile1" data-type="comp_cellface">
                        <div class="uploadedpic"><img src="/wx/img/trans.png" width="75"></div>
                    </div>


                </li>
                <li>
                    <div class="pic" id="imgMobile2">
                        <img src="/wx/img/uploadpic2.jpg" width="75">
                        <div class="uploading">上传中</div>
                    </div>
                     <div class="ui-txt-muted">侧面</div>
                    <div class="uploadpic">
                        <i class="iconfontbaoxian icon-xiangji"></i>
                        <input type="file" name="file-mobile2" data-for="imgMobile2" data-type="comp_cellskew">
                        <div class="uploadedpic"><img src="/wx/img/trans.png" width="75"></div>
                    </div>


                </li>
                <li>
                    <div class="pic" id="imgIdCard">
                        <img src="/wx/img/uploadpic3.jpg" width="75">
                        <div class="uploading">上传中</div>
                    </div>
                    <div class="ui-txt-muted">手持身份证</div>
                    <div class="uploadpic">
                        <i class="iconfontbaoxian icon-xiangji"></i>
                        <input type="file" name="file-idcard" data-for="imgIdCard" data-type="comp_bodyface">
                        <div class="uploadedpic"><img src="/wx/img/trans.png" width="75"></div>
                    </div>

                </li>
            </ul>
            <div style="text-align: center;padding:15px 15px">
                <div class="lipei_detail" style="margin-bottom: 10px;text-decoration: underline">点击查看理赔须知</div>
                <form id="form1" action="/rest/svcLipeiIns/mdCompensateGenerate">
                    <input type="hidden" value="<%= udid%>" name="udid"/>
                    <input type="hidden" value="<%= insure_id%>" name="insure_id"/>
                    <input type="hidden" value="<%= cellno%>" name="cellno"/>
                    <input type="hidden" value="<%= prod_id%>" name="prod_id"/>
                <button type="button" id="btnOk" class="ui-btn ui-btn-primary ui-btn-lg">确认理赔提交</button>
                </form>
            </div>
        </div>
    </section>

<script src="//cdn.juqingdata.com/assets/js/exif.js"></script>
<script src="/wx/js/MegaPixImage.js"></script>
<script>
    $(function(){
        var cellno = '<%= cellno%>';
        var prod_id = '<%= prod_id%>';
        var udid = '<%= udid%>';
        var uimg = {
            comp_invoice:{img:null,title:'发票/小票'},
            comp_cellface:{img:null,title:'手机正面'},
            comp_cellskew:{img:null,title:'手机侧面'},
            comp_bodyface:{img:null,title:'手持身份证'}
        };

        var selObj = $('#prodList')[0];
        $('#prodName').val(selObj.options[selObj.selectedIndex].text);


        try {
            new Blob(['hello'],{type:'text/plain'});
        }catch(e){
            juq.showTipErr('请在微信中提交理赔订单',0);
            return;
        }

        $('input[type=file]').change(function(){
            var $file = $(this);
            if($file[0].files<=0){
                return;
            }
            var file = $file[0].files[0];
            var $imgWrap = $('#'+$file.data('for'));
            var $img = $imgWrap.find('img');
            var $uploading = $imgWrap.find('.uploading');
            var type =  $file.data('type');
            var filename = file.name;
            var mime = filename.toLowerCase().substr(filename.lastIndexOf("."));
            var imgMap = {
                '.jpg':1,'.png':1,'.jpeg':1,'.gif':1,'.bmp':1
            };
            if(!imgMap[mime]) {
                juq.showTipErr('请上传图片文件');
                return;
            }
            var p = {
                cellno: cellno,
                prod_id: prod_id,
                imgtype: type,
                udid: udid
            };
            $uploading.css('color','white').text('上传中').show();

            upload.upImg(file, $img, p, function(path){
                $uploading.hide();
                uimg[type].img = path;
                $img.attr('src',path);
            }, function(msg){
                $uploading.css('color','red');
                juq.showTipErr(msg);
                $uploading.text(msg);
            });
        });

        $('.pic img').on('touchend',function (e) {e.preventDefault();
            var src = $(this).attr('src');
            var dia = $.dialog({
                content: '<img src="' + src + '" style="max-width:100%;max-height:400px">'
            });
            dia.on('touchend', function (e) {
                e.preventDefault();
                if (e.target.id == 'dialogButton0') {
                    $.dialog('hide');
                }
            })

        });

        $('#btnOk').on('touchend',function(){
            var url = $('#form1').attr('action');
            var p  = $('#form1').serializeArray();
            var errMsg = '';
            for(var i in uimg){
                if(!uimg[i].img){
                    juq.showTipErr('请上传'+uimg[i].title+'照片');
                    return;
                }
            }

            juq.showLoading();
            juq.fpost(url,p,function (res){
                juq.hideLoading();
               // juq.showTipSuc('您的理赔资料已经提交成功.');
                window.location.href='/wx/html/success.html'
            },function(res,msg){
                juq.hideLoading();
                juq.showTipErr(msg);
            });
        });

        $('.lipei_detail').on('touchend',function (e) {e.preventDefault();
            var dia = $.dialog({
                content:'<div style="text-align: left;overflow: auto;height: 400px;"><h3>理赔流程：</h3>'+
                             '<p style="font-weight: bold">1. 应用内一键理赔：</p>'+
                         '<p>(1).用户登录机匣子，在应用首页的保单上点击“申请理赔”；</p>'+
                         '<p>(2).用户确认理赔信息，确保当前使用的手机是被保手机；</p>'+
                         '<p>(3).用另一部手机的微信扫描二维码，并按照提示上传理赔资料；</p>'+
                         '<p>(4).等待审核，审核通过后客服会联系您进行手机维修；</p>'+
                         '<p>注释：应用内理赔只能在投保手机上进行，如投保手机已损坏请联系客服。</p>'+
                         '<p style="font-weight: bold">2. 联系客服理赔：</p>'+
                         '<p>(1).官网或应用内找到“联系客服”， 点击进入客服系统；</p>'+
                         '<p>(2). 提供您的姓名，身份证号等信息以便客服查询您的投保信息；</p>'+
                         '<p>(3). 按照客服要求提交理赔资料；</p>'+
                         '<p>(4). 等待审核，审核通过后客服会联系您进行手机维修；</p>'+
                         '<p>官网地址：<a href="http://www.juqingdata.com">www.juqingdata.com</a></p>'+
                         '</div>'
            });
            dia.on('touchend',function (e) {
                if(e.target.id=='dialogButton0'){
                    $.dialog('hide');
                }
            })
        });
        $('.del').on('touchend',function (e) {
            e.preventDefault();
            $(this).parent().hide()
        })
    })
</script>
<%- include ftailer.ejs%>